<p>test-data works!</p>

<hr>

<button (click)="getNowDate()">{{nowdate}}</button>
<button (click)="toDate()">toDate</button>

<hr>
<button (click)="handlerAnimation()">动画</button>
<button class="animation-style" [ngClass]="{ 'animation-act': animationBtn }">按钮</button>

<hr>
<!-- your-component.component.html -->
<!-- <p>{{ sayHello('World') }}</p> -->

<!-- 可点击区域 -->
<!-- 双击重置 -->
<div class="canvas" (mousedown)="onFirstPointClick($event)" (mousemove)="onMouseMove($event)"
  (mouseup)="onSecondPointClick($event)" (dblclick)="reset()">
  <!-- 实时显示距离（厘米，保留3位小数） -->
  <div *ngIf="showDistance" class="distance-info">
    距离: {{ currentDistance | number: '1.3-3' }} 厘米
  </div>

  <!-- 点标记和辅助线（SVG绘制） -->
  <svg class="drawing-layer" width="100%" height="100%">
    <!-- 辅助线 -->
    <line *ngIf="firstPoint && secondPoint" [attr.x1]="firstPoint.x" [attr.y1]="firstPoint.y" [attr.x2]="secondPoint.x"
      [attr.y2]="secondPoint.y" stroke="#ff4d4f" stroke-width="2" stroke-dasharray="5,3" />

    <!-- 第一个点标记（红色） -->
    <g *ngIf="firstPoint">
      <circle [attr.cx]="firstPoint.x" [attr.cy]="firstPoint.y" r="6" fill="#ff4d4f" />
      <text [attr.x]="firstPoint.x + 10" [attr.y]="firstPoint.y - 10" fill="#333" font-size="12">
        点1 ({{ firstPoint.x }}, {{ firstPoint.y }})
      </text>
    </g>

    <!-- 第二个点标记（蓝色） -->
    <g *ngIf="secondPoint">
      <circle [attr.cx]="secondPoint.x" [attr.cy]="secondPoint.y" r="6" fill="#1890ff" />
      <text [attr.x]="secondPoint.x + 10" [attr.y]="secondPoint.y - 10" fill="#333" font-size="12">
        点2 ({{ secondPoint.x }}, {{ secondPoint.y }})
      </text>
    </g>
  </svg>
</div>

<!-- 重置按钮 -->
<button *ngIf="firstPoint" class="reset-btn" (click)="reset()">
  重新测量
</button>